// pages/play-music/index.js
import { audioContext, playerStore  } from '../../store/index'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    playDetail: {},
    duration: 0,
    lyricList: [],

    currentPage: 0,

    currentTime: 1,
    lyricText: '',
    currentIndex: 0,

    islyricMusic: true,
    sliderValue: 0,
    isSliderChanging: false,
    scrollTop: 0,

    statuName: 'pause',
    isPlaying: false,
    modeName: 'order',
    playModeIndex: 0
  },

  // 事件处理
  handleSwiperChange: function(event) {
    const current = event.detail.current
    this.setData({ currentPage: current })
  },
  handleSliderChange: function(event) {
    const value = event.detail.value
    const currentTime = this.data.duration * value / 100
    this.setData({ sliderValue: value, currentTime })

    audioContext.pause()
    audioContext.seek(this.data.currentTime / 1000)
    this.setData({ isSliderChanging: false })
  },
  handleSliderChanging: function(event) {
    const value = event.detail.value
    const currentTime = value / 100 * this.data.duration
    this.setData({ currentTime, sliderValue: value, isSliderChanging: true })
  },
  handleBackClick: function() {
    wx.navigateBack()
  },
  handleChangeStatuClick: function() {
    playerStore.dispatch('changePlayingStatuAction', !this.data.isPlaying)
  },
  handleChangeModeClick: function() {
    let playModeIndex = this.data.playModeIndex + 1
    if (playModeIndex === 3) playModeIndex = 0
    playerStore.setState('playModeIndex', playModeIndex)
  },
  handlePreClick: function() {
    playerStore.dispatch('changeMusicAction', { isNext: false, isEnded: false })
  },
  handleNextClick: function() {
    playerStore.dispatch('changeMusicAction', { isEnded: false })
  },

  onLoad: async function (options) {
    const id = options.id
    // 获取播放信息
    this.setupPlayerListener()
    
    // 动态计算内容高度
    const globalData = getApp().globalData
    const screenHeight = globalData.screenHeight
    const statusBarHeight = globalData.statusBarHeight
    const navBarHeight = globalData.navBarHeight
    const deviceRadio = globalData.deviceRadio
    const contentHeight = screenHeight - statusBarHeight - navBarHeight
    this.setData({ contentHeight, islyricMusic: deviceRadio > 2 })

  },

  // 监听并获取播放数据
  setupPlayerListener: function() {
    // 监听播放数据
    playerStore.onStates(['playDetail', 'duration', 'lyricList'], ({playDetail, duration, lyricList}) => {
      if (playDetail) this.setData({ playDetail })
      if (duration) this.setData({ duration })
      if (lyricList) this.setData({ lyricList })
    })

    // 监听当前歌词和时间
    playerStore.onStates(['currentTime', 'lyricText', 'currentIndex'], ({currentTime, lyricText, currentIndex}) => {
      if (currentTime && !this.data.isSliderChanging) {
        const sliderValue = currentTime / this.data.duration * 100
        this.setData({ currentTime, sliderValue })
      }
      if (currentIndex) {
        const scrollTop = currentIndex * 35
        this.setData({ currentIndex, scrollTop })
      }
      if (lyricText) this.setData({ lyricText })
    })

    // 监听播放状态和模式
    const modeNames = ['order', 'repeat', 'random']
    playerStore.onStates(['isPlaying', 'playModeIndex'], ({ isPlaying, playModeIndex }) => {
      if (isPlaying !== undefined) {
        this.setData({ statuName: isPlaying ? 'pause' : 'resume', isPlaying })
      }

      if (playModeIndex !== undefined) {
        this.setData({ modeName: modeNames[playModeIndex], playModeIndex })
      }
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  }
})